<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px auto;
            width: 600px;
        }

        .box>input {
            height: 30px;
            text-indent: 15px;

            outline: none;
            border: 1px solid black;
        }

        .box>span {
            background-color: #808080;
            border: 1px solid #808080;
            color: #AAAAAA;
            vertical-align: middle;
            width: 300px;
            line-height: 30px;
            text-indent: 14px;

        }

        .box>span.wu {
            display: inline-block;
            border: 1px solid#f9b098;
            color: red;
            background: #ffdcd0 url(./wrong.png) no-repeat left;
        }

        .box>span.zui {
            display: inline-block;
            border: 1px solid#c9ddc9;
            color: green;
            background: #dfffdf url(./right.png) no-repeat left;

        }
    </style>

<body>
    <div class="box">
        <label for="score">英语：</label>
        <input type="txt" id="score">
        <span>请输入英语</span>
    </div>
</body>

<script>
    window.onload = function () {
        var ipt = document.querySelector('input')
        var spn = document.querySelector('span')

        ipt.onblur = function () {


            var val = this.value
            if (val === '') {
                var txt = document.createTextNode('分数不能为空')
                spn.append(txt)
                spn.innerText = '亲，内容不能为空'
                spn.className = "wu"
                return
            }

            if (isNaN(val)) {
                spn.innerText = '亲，请输入数字'
                spn.className = "wu"
                return
            }

            if (Number(val) > 150 || Number(val) < 0) {
                spn.innerText = '亲，请输入合理的范围(0-150)'
                spn.className = "wu"
                return
            }

            spn.innerText = '亲，数据合理'
            spn.className = "zui"

        }

    }
</script>



</html>